import React from 'react';
import ReactDOM from 'react-dom'
import store from './store'
// import {Provider,connect} from 'react-redux'
import {Provider,connect} from './myreact_redux'

class Color extends React.Component{
    render(){
        return <h2 style={{color:this.props.color}}>color</h2>
    }
}
Color = connect((state)=>({color:state.colorReducer.color}),(dispatch)=>({dispatch}))(Color)

class App extends React.Component {
    componentDidMount(){
        // store.subscribe(()=>{
        //     this.setState({})
        // })
    }
    add = (dispatch,getState)=>{
        setTimeout(() => {
            dispatch({type:'add',num:10})
        }, 2000);
    }
    render() {
        console.log(this)
        return <div className=''>
            <Color/>
            {/* <Counter/> */}
            <h2>{this.props.countReducer.count}</h2>
            <button onClick={()=>{this.props.dispatch(this.add)}}>+</button>

            <button onClick={()=>{this.props.dispatch({type:"changeColor",col:'blue'})}}>边栏</button>
        </div>;
    }
}
console.log(store)

App = connect((state)=>(state),(dispatch)=>({dispatch}))(App)

ReactDOM.render(<Provider store={store}><App className="box"/></Provider>,document.getElementById('root'))